<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>初识vue</title>
</head>
<body>
    <div id="root">
        <!-- 
            MVVM: Model-View-ViewModel
            1. Model: 数据模型，数据源
            2. View: 视图，展现层
            3. ViewModel: 视图模型，数据双向绑定，将Model和View连接起来，实现数据和视图的同步更新
            观察发现:
            1.data中的所有属性，最后都出现在了vm身上
            2vm身上所有的属性，以及Vue原型上的所有属性，在vue模板中都可以直接使用
        -->
       <!-- view -->
        <h1>你好,{{name}}</h1>
        <h1>地址:{{address}}</h1>
        <h1>测试一下:{{1-1}}</h1>
        <h1>测试一下2:{{$options}}</h1>
        <h1>测试一下3:{{$emit}}</h1>
        <h1>测试一下4:{{_c}}</h1>
    </div>
</body>
<script>
    Vue.config.productionTip=false;
    // view model
    const vm = new Vue({
        el: "#root",
        // model
        data:{
            name: "Vue",
            address: "北京" 
        }
    });
    console.log(vm);
</script>
</html>